<template>
  <div class="jgldmk">
    <div class="blueTitleStyle">环境信息</div>
    <div class="content">
      <div class="contenr-special">
        <div class="item">
          <div class="item-left">温度</div>
    <div class="item-right" v-if="hjdata['040203'].value!=='-'">
            <span>{{hjdata['040203'].value}}</span>
            <span>{{hjdata['040203'].unit}}</span>
          </div>
          <div class="item-right" v-else>
            <span>{{hjdata['040102'].value}}</span>
            <span>{{hjdata['040102'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">湿度</div>
          <div class="item-right" v-if="hjdata['040204'].value!=='-'">
            <span>{{hjdata['040204'].value}}</span>
            <span>{{hjdata['040204'].unit}}</span>
          </div>
          <div class="item-right" v-else>
            <span>{{hjdata['040103'].value}}</span>
            <span>{{hjdata['040103'].unit}}</span>
          </div>
        </div>
        <!-- <div class="item">
          <div class="item-left">气压</div>
          <div class="item-right">
            <span>{{hjdata['040207'].value}}</span>
            <span>{{hjdata['040207'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">雨量</div>
          <div class="item-right">
            <span>{{hjdata['040206'].value}}</span>
            <span>{{hjdata['040206'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">风速</div>
          <div class="item-right">
            <span>{{hjdata['040201'].value}}</span>
            <span>{{hjdata['040201'].unit}}</span>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  mounted() {
    this.setStationId();
  }
  setStationId() {
    let query = this.$route.query || {};
    let stationId: any = query.BDZID;
    this.stationId = stationId;
  }
  stationId: ""; //变电站
  get hjdata() {
    let getterStationHj = GetSocketModule.getterStationHj || {};
    let hjdata = getterStationHj[this.stationId] || {};
    console.log(12, hjdata);
    let obj = {
       "040201": {
        value: "-",
        unit: "m/s",
      }, //风速监测
      "040202": {
        value: "-",
        unit: "m/s",
      }, //风向
      "040203": {
        value: "-",
        unit: "℃",
      }, //温度监测
      "040102": {
        value: "-",
        unit: "℃",
      }, //温度监测
      "040204": {
        value: "-",
        unit: "%",
      }, //湿度监测
      "040103": {
        value: "-",
        unit: "%",
      }, //湿度监测
      "040206": {
        value: "-",
        unit: "mm",
      }, //  雨量
      "040207": {
        value: "-",
        unit: "kPa",
      }, //  气压
      stationName: "", //变电站名称
      stationId: "", //变电站
    };
    for (let key in hjdata) {
      let item = hjdata[key] || {};
      obj[key] = {
        value: item.value || '-',
        unit: item.unit || "",
      };
    }
    // "040201": //风速监测
    // "040202": //风向
    // "040203": //温度监测
    // "040204"://湿度监测
    // "040206": //  雨量
    //风力,根据风速判断 feng(040201.value)
    let stationName = hjdata["stationName"];
    let stationId = hjdata["stationId"];
    obj.stationName = stationName;
    obj.stationId = stationId;

    return obj;
  }
}
</script>

<style lang="scss" scoped>
.jgldmk {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100% - 0.3rem);
    .contenr-special {
      width: 100%;
      height: 100% ;
      padding: 0.08rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0.1rem 0.16rem;
      .item {
        // width: calc(100% - 0.05rem);
        width: calc(50% - 0.05rem);
        height: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 0.04rem;
        border: solid 1px rgb(30, 110, 190);
        &-left {
          width: 40%;
          text-align: center;
          border-right: solid 1px royalblue;
        }
        &-right {
          width: 60%;
          padding: 0 0.1rem;
        }
      }
    }
  }
}
</style>

